Intro
Components
supa-auth-callback-handler
Handles the OAuth callback from Supabase using the PKCE flow. Extracts the authorization code from the URL, exchanges it for access and refresh tokens, and stores them in secure HttpOnly cookies.
Attributes
anon-key Supabase anonymous API key used for authenticating the request. project-url The base URL of the Supabase project used to construct the API endpoint. Events
onError This event is triggered if an error occurs during the sign-in or cookie process. onSuccess This event is triggered once the authentication and cookie setting processes are successfully completed. supa-change-pw-form
Form component to handle password change via Supabase. Submits the new password using a secured API call and handles success and error outcomes.
Attributes
anon-key Supabase anonymous API key used in request headers. project-url Base URL of the Supabase project for making the API call. Events
onError Triggered when the password change request fails. onSuccess Triggered when the password change request completes successfully. onSubmit Triggered when the user submits the password change form. supa-connect-context
Provides PKCE-related context data for Supabase OAuth flow, including generation and storage of code verifier and code challenge, as well as helper formulas for redirect and provider link generation. This context must be present at the root level of a page, as some other supa-components subscribe to it for their internal operation.
Attributes
project-url The base URL of the Supabase project used to construct authentication URLs. auth-callback-url The redirect URL to be used after authentication. Formulas
refreshTokenExpiration Refresh token expiration in seconds. Used internally to set cookie expiration. authProviderLinks Returns a map of available auth providers to their corresponding OAuth login URLs, using the current PKCE code challenge and callback URL. codeVerifier References the stored PKCE code verifier value. Required internally for the PKCE flow. codeChallenge References the stored PKCE code challenge value. Required internally for the PKCE flow. authCallbackUrl Provides and encodes the auth-callback-url. Used in the OAuth and magic link flows to redirect back after authentication. supa-dropzone
A drag-and-drop file upload component for Supabase storage. Handles file selection, validation, and uploading via signed URLs.
Attributes
accept Specifies the accepted file types for upload (e.g., image/*). anon-key Supabase anonymous API key used to authenticate the upload requests. max-size-mb The maximum allowed file size in megabytes. project-url Base URL of the Supabase project used for storage API endpoints. upload-path Target path in the Supabase storage bucket where files should be uploaded. allow-multiple Whether multiple files can be selected and uploaded in a single action. Events
onStart Triggered when a file upload process begins. onSuccess Triggered when a file is uploaded successfully. onError Triggered if an error occurs during upload or URL signing. onFileTooLarge Triggered when a selected file exceeds the allowed size limit. onEnd Triggered when the upload process has finished for all files. onDrop Triggered when files are dropped onto the dropzone. Formulas
labelId Provides the unique ID for the label element, used by the supa-dropzone-label. descriptionId Provides the unique ID for the description element, used by the supa-dropzone-description. supa-dropzone-description
Provides a description element for the Supabase dropzone component, connected via ARIA attributes for accessibility.
Formulas
descriptionId ID used to bind the dropzone's input to this description element for accessibility. Retrieved from the supa-dropzone context. supa-dropzone-label
Renders a label element for the Supabase dropzone component and connects it via ARIA attributes for accessibility.
Formulas
labelId ID used to bind the dropzone's input to this label element for accessibility. Retrieved from the supa-dropzone context. supa-magic-link-handler
Handles Supabase magic link authentication by extracting tokens from the URL hash and securely setting them in HttpOnly cookies.
Events
onError Triggered if an error occurs while parsing the URL or setting the authentication cookies. onSuccess Triggered once both access and refresh tokens have been successfully stored as HttpOnly cookies. supa-protected-page-context
Provides session protection and automatic token refresh logic for pages requiring authenticated Supabase access.
Attributes
anon-key Supabase project anonymous key used for API authorization. project-url Base URL of the Supabase project used for API requests. redirect-to Path to redirect the user to in case of session refresh failure. enable-realtime Flag to enable or disable Supabase real-time websocket connection. Events
onRefreshError Triggered if the session refresh attempt fails. onRefreshSuccess Triggered once the session refresh process completes successfully. onLogoutError Triggered if an error occurs during the logout process. onLogoutSuccess Triggered once the logout process completes successfully. Formulas
isRefreshing Indicates whether a session refresh request is currently active. userData Combined object containing user profile information such as ID, email, and timestamps. isLoggingOut Indicates whether a logout operation is currently in progress. Workflows
logout Logs the user out by revoking the refresh token and clearing related cookies. supa-realtime
Listens to Supabase realtime events (insert, update, delete) on a specific table and triggers events accordingly.
Attributes
event The type of event to listen for: insert, update, delete. table The name of the table in Supabase to watch for changes. filter Optional filter expression to limit the events received. schema The schema in which the table resides. Defaults to 'public'. Events
onInsert Triggered when a new row is inserted into the specified table. onUpdate Triggered when an existing row is updated in the specified table. onDelete Triggered when a row is deleted from the specified table. onError Triggered when an error occurs while listening to the realtime feed. supa-refresh-session-handler
Automatically refreshes a Supabase session using a stored refresh token from HttpOnly cookies and updates the access/refresh tokens if successful.
Attributes
anon-key The Supabase anonymous API key used to authorize the refresh request. project-url The base URL of the Supabase project where the refresh token is sent. Events
onError Triggered if the session refresh fails or cookies cannot be set properly. onSuccess Triggered once new session tokens are successfully fetched and stored. supa-request-pw-form
Provides a password reset request form using Supabase. Submitting the form triggers the API to send a recovery email.
Attributes
anon-key The Supabase API key used for authenticating the request. project-url The base URL of the Supabase project used to send the reset request. redirect-to The URL to which the user should be redirected after clicking the reset link from the email. Events
onSubmit Triggered when the form is submitted before the password reset request is sent. onError Triggered when the password reset request fails (e.g. due to invalid input or network errors). onSuccess Triggered when the password reset request completes successfully. supa-signin-email-pw-form
A form component that handles user sign-in via email and password for Supabase. On submission, it performs authentication and stores tokens as HttpOnly cookies.
Attributes
anon-key The Supabase anonymous API key used to authenticate the request. project-url The Supabase project URL to which the authentication request is sent. Events
onSubmit Triggered when the form is submitted, before the sign-in API request is made. onError Triggered if the sign-in request fails or cookies cannot be set. onSuccess Triggered after successful authentication and token storage. supa-signin-magic-form
A form component that triggers Supabase magic link authentication. On submission, it requests a magic link for the provided email and optionally creates a user.
Attributes
anon-key The Supabase anonymous API key used to authenticate the magic link request. project-url The Supabase project URL used for sending the magic link authentication request. create-user If true, a new user will be created if one does not already exist for the given email. Events
onSubmit Triggered when the form is submitted before sending the magic link request. onError Triggered if the magic link request fails (e.g. due to network issues or invalid input). onSuccess Triggered when the magic link request is successfully sent. supa-signup-email-pw-form
A form component to handle user sign-up using Supabase with email and password. Sends a request to the Supabase `auth.signup` endpoint.
Attributes
anon-key The Supabase anonymous API key used to authorize the signup request. project-url The Supabase project URL used as the base for the signup API call. Events
onSubmit Triggered when the form is submitted, before the signup request is made. onError Triggered if the signup request fails, e.g. due to an invalid email, weak password, or network issue. onSuccess Triggered when the signup request is successfully completed and the user account is created. supa-websocket-context
A context component that manages a Supabase WebSocket connection, including reconnection logic, heartbeat messaging, and connection state variables. This component is automatically used inside the supa-protected-page-context and should not be used manually.
Attributes
enabled Boolean flag to control whether the WebSocket connection should be initialized. anon-key The Supabase anonymous API key required to authenticate the WebSocket connection. project-url The base URL of the Supabase project used to construct the WebSocket endpoint. access-token The current short-lived access token used to authenticate the WebSocket session. Formulas
accessToken Exposes the current access token from context for use in other formulas or components. isConnected Indicates whether the WebSocket is currently connected. isReconnecting Indicates whether a reconnection attempt is currently in progress.